<template>
    <li class="flex justify-between items-center w-full" @mouseenter="mouseHandler(true)" @mouseleave="mouseHandler(false)" :style="{backgroundColor:bgColor,color:myColor}">
        <el-checkbox v-model="isCompleted" :label="todo.title" size="large" />
        <el-button type="danger" size="small" v-show="isShow" @click="delTodo()">删除</el-button>
    </li>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { ElMessageBox } from 'element-plus';
import type { Todo } from '../../types/todo'

export default defineComponent({
    setup (props) {
        const bgColor = ref('white')
        const myColor = ref('black')
        const isShow = ref(false)
        const mouseHandler = (flag:boolean) => {
            if(flag) {
                bgColor.value = 'pink'
                myColor.value = 'green'
                isShow.value = true
            } else {
                bgColor.value = 'white'
                myColor.value = 'black'
                isShow.value = false
            }
        }
        // 删除方法
        const delTodo = () => {
            ElMessageBox.confirm('确定要删除吗？', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                props.deleteTodo(props.index)
            })
            
        }

        const isCompleted = computed({
            get(){
                return props.todo.isCompleted
            },
            set(val){
                props.updateTodo(props.todo, val)
            }
        })

        return {
            mouseHandler,
            delTodo,
            bgColor,
            myColor,
            isShow,
            isCompleted,
        }
    },
    props: {
        todo: {
            type: Object as ()=> Todo,
            required: true
        },
        deleteTodo: {
            type: Function,
            required: true
        },
        index: {
            type: Number,
            required: true
        },
        updateTodo: {
            type: Function,
            required: true
        }
    }
})
</script>

<style scoped>

</style>